﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    </style>
    <script src="../../lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>  
    <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
     <script src="../../lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
        <script src="../../lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
   <script src="../grid/CustomersData.js" type="text/javascript"></script>
    <script src="../../lib/fix1.js"></script>
    <script type="text/javascript">
        $(function ()
        {
            var columns = [
                { header: 'ID', name: 'id', width: 80 },
                { header: '名字', name: 'name', width: 170 },
                { header: '描述', name: 'desc', width: 170 }
            ];
             
 

            $("#txt2").ligerComboBox(
                {
                    url: '../../data/net/ComboBoxData.ashx',
                    valueField: 'id',
                    textField: 'name', 
                    selectBoxWidth: 400,
                    autocomplete: true,keySupport:true,
                    width: 400 
                }
            );


            $("#txt3").ligerComboBox(
                {
                    url: '../../data/net/ComboBoxData.ashx',
                    valueField: 'id',
                    textField: 'name',
                    selectBoxWidth: 400,
                    autocomplete: true,
                    width: 400, keySupport: true,
                    renderItem: function (e)
                    { 
                        var data = e.data, key = e.key;
                        var out = [];
                        out.push('<div>' + this._highLight(data.name, key) + '</div>');
                        out.push('<div class="desc">备注:' + data.desc + '</div>');
                        return out.join('');
                    }
                }
            );


            $("#txt4").ligerComboBox(
                {
                    url: '../../data/net/ComboBoxData.ashx',
                    valueField: 'id',
                    textField: 'name',
                    selectBoxWidth: 400,
                    autocomplete: function (e)
                    {
                        alert(e.key);
                        e.show();
                    },
                    keySupport: true,
                    width: 400
                }
            );

            var combo = $("#txt5").ligerComboBox({
                width: 400 ,
                slide: false,
                selectBoxWidth: 500,
                selectBoxHeight: 240,
                valueField: 'CustomerID',
                textField: 'CustomerID',
                autocomplete: function (e)
                {
                    alert(e.key);
                    e.show();
                },
                keySupport: true,
                delayLoadGrid : false,
                grid: {
                    columns: [
                    { display: '顾客', name: 'CustomerID', align: 'left', width: 100, minWidth: 60 },
                    { display: '电话', name: 'Phone', width: 100 },
                    { display: '城市', name: 'City', width: 100 },
                    { display: '国家', name: 'Country', width: 100 }
                    ],
                    switchPageSizeApplyComboBox: false,
                    data: $.extend({}, CustomersData), 
                    pageSize: 30,
                    checkbox: true
                }
            }); 
        });
         
    </script>
    <style type="text/css">
        .desc {
            background: #fafafa; color:ActiveCaption;
            border-bottom:1px solid #d3d3d3; margin-top:3px; margin-bottom:3px;
        } 
        .l-over .desc,.l-selected .desc {
            background: none;
        }
    </style>
</head>
<body style="padding:10px">    
    <input type="text" id="txt2"/><br />   

    <input type="text" id="txt3"/><br /> 

     <input type="text" id="txt4"/><br />

         <input type="text" id="txt5"/><br />
    <div class="liger-button"></div>
 <div style="display:none;">
 
</div>
</body>
</html>
